<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;
        }
        
        span {
            position: absolute;
            transform: translate(-50%, -150%);
            animation: words 1.5s linear;
            pointer-events: none;
        }
        
        @keyframes words {
            form {
                display: none;
                color: red;
            }
            to {
                color: #fff;
                transform: translate(20px, -100px);
            }
        }
    </style>
</head>

<body>
    <script>
        let arr = ['字节', '阿里', '美团', '腾讯', '百度'];
        window.addEventListener('click', (e) => {
            let span = document.createElement('span');
            span.style.left = e.offsetX + 'px';
            span.style.top = e.offsetY + 'px';
            let r = Math.floor(Math.random() * arr.length);
            span.innerHTML = arr[r];
            span.style.color = 'red';
            document.body.appendChild(span);
            setTimeout(() => {
                document.body.removeChild(span);
            }, 1500);
        })
    </script>
</body>

</html>